<template>
	<view class="out">
		<input type="text"  @focus="show = true" @blur="show = false" v-model="iptValue" @confirm="onConfirm"/>
		<image src="/static/chicken.gif" mode="" class="pic" :class="{active:show}"></image>
	</view>
	<view>预览: {{iptValue}}</view>
</template>

<script setup>
import {ref} from 'vue'
const iptValue = ref('')
const show = ref(false)

function onConfirm(e){
	console.log(e)
}
</script>

<style lang='scss' scoped>
.out{
	padding: 0 20px;
	margin-top: 40px;
	position: relative;
	input{
		border: 1px solid #ccc;
		height: 40px;
		position: relative;
		z-index: 2;
		background: #fff;
	}
	.pic{
		width: 24px;
		height: 24px;
		position: absolute;
		z-index: 1;
		top: 0;
		left: calc(50% - 12px);
		transition:top .5s;
	}
	.pic.active{
		top: -24px;
	}
}
</style>
